<template>
  <div class="container">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="form">
      <el-form-item label="项目名" prop="name">
        <el-col :span="6">
          <el-input v-model="form.name" placeholder="请输入项目名" size="small"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" native-type="submit" @click.prevent="submit">
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { api } from '~/assets/utils'
import { Loading } from 'element-ui'
export default {
  layout: 'main',
  data() {
    return {
      rules: {
        name: [
          { required: true, message: '请输入项目包', trigger: 'change' }
        ]
      },
      form: {
        name: ''
      }
    }
  },
  mounted() {
    const { id, name } = this.$route.query
    this.form = { id, name }
  },
  methods: {
    submit() {
      const loading = Loading.service({ fullscreen: true })
      const { id } = this.$route.query
      this.form.id = id
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$axios.post(api.updateProject, this.form).then((data) => {
            this.$message({
              type: 'success',
              message: data.msg
            })
            loading.close()
            this.$router.go(-1)
          })
        }
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.container{
  padding: 30px;
}
</style>
